<template>
  <div class="AddressListPage">
    <van-address-list
      v-model="chosenAddressId"
      :switchable="false"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
    <van-empty v-if="list.length == 0" description="暂无数据" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { addressList } from "@/types/types";
import { AddressList, Empty } from "vant";
Vue.use(AddressList);
Vue.use(Empty);
window.onload = function () {
  var isPageHide = false;
  window.addEventListener("pageshow", function () {
    if (isPageHide) {
      window.location.reload();
    }
  });
  window.addEventListener("pagehide", function () {
    isPageHide = true;
  });
};
@Component({})
export default class AddressListPage extends Vue {
  private chosenAddressId: string = "1";
  private isPageHide = false;
  private list: addressList[] = [];
  private mounted(): void {
    this.$common.getAuthToken(this.getAreaList);
  }

  private getAreaList(): void {
    this.$post(`logisticsList`).then((res: any) => {
      if (res.code == 0) {
        this.list = res.data.map((item: any) => {
          return {
            id: item.logisticsId,
            name: item.name,
            tel: item.mobile,
            address:
              item.cityName +
              item.provinceName +
              item.countyName +
              item.address,
            isDefault: item.main == 1 ? true : false,
          };
        });
      }
    });
  }
  onAdd(): void {
    this.$router.push("/address/0");
  }
  onEdit(item: any): void {
    this.$router.push(`/address/${item.id}`);
  }
}
</script>

<style lang="scss" scope>
.AddressListPage {
  .van-button--danger {
    background-color: #d2a166;
    border-color: #d2a166;
  }
  .van-address-item .van-radio__icon--checked .van-icon {
    background-color: #d2a166;
    border-color: #d2a166;
  }
}
</style>
